<template>
  <view class="ver-layout">
    <view class="top-view">
      <view class="top-view-info hor-layout-side-center">
        <view class="name">可喵</view>
        <view class="phone">15148023952</view>
      </view>
      <view class="address">地址：内蒙古鄂尔多斯市薛家湾镇北苑西区三号楼3单元1203</view>
    </view>
    <view class="order-info">
      <view class="info-title">北京康乐富</view>
      <view class="order-info-content hor-layout">
        <image class="order-icon"/>
        <view class="ver-layout" style="flex: 1">
          <view class="order-name">可爱绒毛兔子</view>
          <view class="order-style">颜色：随机 尺寸：50x50cm</view>
          <view class="hor-layout-side">
            <view class="order-score">850签到积分</view>
            <view class="order-score">x1</view>
          </view>
        </view>
      </view>
      <view class="order-content hor-layout-side" style="margin-top: -5px">
        <view class="key">运费</view>
        <view class="key">免邮</view>
      </view>
      <view class="order-content hor-layout-side">
        <view class="key">开具发票</view>
        <view class="value">暂不提供发票</view>
      </view>
      <view class="order-bottom">
        <view class="text"> 共
          <span class="red">1</span>件商品 小计：
          <span class="red">850积分</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "cscoreOrder"
}
</script>

<style>
page {
  background: #F2F2F2;
}

.top-view {
  padding: 12px;
  margin-top: 18px;
  width: 100%;
  background: #FFFFFF;
}

.top-view > .address {
  margin-top: 12px;
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
}

.top-view-info > .name {
  font-size: 14px;
  line-height: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}

.top-view-info > .phone {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}

.order-info {
  margin-top: 19px;
  padding: 12px;
  width: 100%;
  background: #FFFFFF;
}

.info-title {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #8B8B8B;
}

.order-info-content {
  margin-top: 12px;
  padding: 7px 12px;
  background: #FAFAFA;
}

.order-icon {
  width: 79px;
  height: 79px;
  margin-right: 12px;
}

.order-name {
  font-size: 15px;
  line-height: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 12px;
}

.order-style {
  margin-top: 12px;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #8B8B8B;
}

.order-score {
  font-size: 14px;
  line-height: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #3C3C3C;
}

.order-content {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #E5E5E5;
}

.order-content > .key {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #3C3C3C;
}

.order-content > .value {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #8B8B8B;
}

.order-bottom {
  margin-top: 18px;
  width: 100%;
  display: flex;
  justify-content: right;
}

.order-bottom > .text {
  color: #3C3C3C;
  font-size: 13px;
}

.order-bottom > .text > .red {
  color: #F94C20;
}
</style>
